<template>
  <div class="va-container">
    <div class="flex-row ">
      <div class="material-textfield green form-left" :class="{'validate-err': errors.has('contactsName')}">
        <input type="text" required v-model="unitcon.contactsName" v-validate="'required'" name="contactsName"/>
        <label data-content="姓名*"></label>
      </div>
      <div class="material-textfield green form-right" :class="{'validate-err': errors.has('fax')}">
        <input type="text" required v-model="unitcon.fax" v-validate="'required|fax'" name="fax"/>
        <label data-content="传真*"></label>
      </div>
    </div>
    <div class="flex-row">
      <div class="material-textfield green form-left" :class="{'validate-err': errors.has('contactsPhone')}">
        <input type="text" required v-model="unitcon.contactsPhone " v-validate="'required|phone'" name="contactsPhone"/>
        <label data-content="手机*"></label>
      </div>
      <div class="material-textfield green form-right" :class="{'validate-err': errors.has('contactsFixedTelephone')}">
        <input type="text" required v-model="unitcon.contactsFixedTelephone" v-validate="'required|fax'" name="contactsFixedTelephone"/>
        <label data-content="固定电话*"></label>
      </div>
    </div>
    <div class="flex-row">
      <div class="material-textfield green form-left" :class="{'validate-err': errors.has('contactsPosition')}">
        <input type="text" required v-model="unitcon.contactsPosition" v-validate="'required'" name="contactsPosition"/>
        <label data-content="职称*"></label>
      </div>
      <div class="material-textfield green form-right" :class="{'validate-err': errors.has('contactsProfessionalTitle')}">
        <input type="text" required v-model="unitcon.contactsProfessionalTitle" v-validate="'required'" name="contactsProfessionalTitle"/>
        <label data-content="职务*"></label>
      </div>
    </div>
    <div class="flex-row">
      <div class="material-textfield green form-left" :class="{'validate-err': errors.has('contactsWechat')}">
        <input type="text" required v-model="unitcon.contactsWechat" v-validate="'required'" name="contactsWechat"/>
        <label data-content="微信号*"></label>
      </div>
      <div class="material-textfield green form-right" :class="{'validate-err': errors.has('contactsQq')}">
        <input type="text" required v-model="unitcon.contactsQq" v-validate="'required|qq'" name="contactsQq"/>
        <label data-content="QQ*"></label>
      </div>
    </div>
    <div class="flex-row">
      <div class="material-textfield green form-left" :class="{'validate-err': errors.has('contactsEmail')}">
        <input type="text" required v-model="unitcon.contactsEmail" v-validate="'required|email'" name="contactsEmail"/>
        <label data-content="Email*"></label>
      </div>
    </div>
    <!-- <div class="tc">
      <el-button type="success width-200" plain round>下一步</el-button>
    </div> -->
  </div>
</template>

<script>
  export default {
    title: '会员单位联系人',
    name: 'vipunit-contacts',
    data () {
      return {
        unitcon: {}
      }
    },
    props: {
      data: {}
    },
    mounted () {
      this.unitcon = Object.assign({}, this.data)
    },
    methods: {
      validate () {
        return this.$validator.validateAll()
      }
    },
    watch: {
      'unitcon': {
        handler: function (val, oldVal) {
          this.$emit('update:data', this.unitcon)
        },
        deep: true
      }
    }
  }
</script>
